;(function($){
    "use strict";
    $.fn.banner = function(ops){
        // console.log(this)
        ops = ops || {};
        // ops.btn = ops.btn===undefined ? true : ops.btn;
        let {
            items,
            btn = true,
            list = true,
            autoPlay = true,
            delayTime = 2000,
            moveTime = 200,
            index = 0,
            prev_text = "prev",
            next_text = "next",
            currentList = ""
        } = ops;
        let prev;
        // 1. 生成图片结构
        const imgbox = $("<div class='imgbox'>");
        items.forEach(val=>{
            $(`<img src='${val.src}' alt='${val.alt}' title='${val.title}'>`).appendTo(imgbox);
        })
        imgbox.appendTo(this);
        imgbox.children("img").eq(index).css({
            left:0
        })

        // 2. 是否需要左右按钮
        if(btn){
            // 生成左右按钮
            $("<div class='btns'>").appendTo(this).append($("<span class='left'>"+prev_text+"</span>")).append($("<span class='right'>"+next_text+"</span>"))
            // 左右按钮的点击事件
            $(".left").click(leftClick);
            $(".right").click(rightClick);
        }
        function leftClick(){
            // 左按钮的计算索引
            if(index === 0){
                index = items.length-1;
                prev = 0;
            }else{
                index--;
                prev = index+1;
            }
            // console.log(prev, index)
            // 根据索引，移动图片
            move(1)
        }
        function rightClick(){
            // 右按钮的计算索引
            if(index === items.length-1){
                index = 0;
                prev = items.length-1;
            }else{
                index++;
                prev = index-1;
            }
            // console.log(prev, index)
            // 根据索引，移动图片
            move(-1)
        }
        function move(d){
            // 提前获取图片的宽度
            const w = imgbox.children("img").eq(0).width();
            // 先控制要走的图片
            //     从哪走
            //     走到哪
            imgbox.children("img").eq(prev).css({
                left: 0
            }).stop().animate({
                left: w * d
            }, moveTime)
            .end()
            // 再控制要进来的图片
            //     从哪进
            //     进到哪
            .eq(index).css({
                left: -w * d
            }).stop().animate({
                left: 0
            }, moveTime)

            // 左右按钮，操作分页器的样式
            // 操作之前先判断是否有分页器
            if(!list) return;
            $(".list").children("li").removeClass(currentList).eq(index).addClass(currentList);
        }

        // 3. 是否需要分页器
        if(list){
            // 生成分页器结构
            const list = $("<ul class='list'>").appendTo(this);
            for(var i=0;i<items.length;i++){
                list.append($("<li></li>"))
            }
            // 添加分页器的默认样式
            list.children("li").eq(index).addClass(currentList).end()
            // 绑定事件
            .click(function(){
                // 判断方向
                if($(this).index() > index){
                    // console.log("左");
                    move(index, $(this).index(), -1)
                }
                if($(this).index() < index){
                    // console.log("右");
                    move(index, $(this).index(), 1)
                }
                // 每次点完之后，点击的索引，就是下次的当前
                index = $(this).index();
            })
            function move(prev, index, d){
                // 提前获取图片的宽度
                const w = imgbox.children("img").eq(0).width();
                imgbox.children("img").eq(prev).css({
                    left: 0
                }).stop().animate({
                    left: w * d
                }, moveTime).end().eq(index).css({
                    left: -w * d
                }).stop().animate({
                    left: 0
                }, moveTime)
                // 取消所有分页器的class，给当前分页器添加
                list.children("li").removeClass(currentList).eq(index).addClass(currentList)
            }
        }

        // 4. 是否需要自动播放
        if(autoPlay){
            // 开启计时器
            let t = setInterval(() => {
                // $(".right").trigger("click");
                // 执行右按钮的事件处理函数
                rightClick()
            }, delayTime);

            // 鼠标进入大框
            this.hover(function(){
                // 停止计时器
                clearInterval(t);
            },function(){
                // 离开大框，重新开启计时器
                t = setInterval(() => {
                    rightClick()
                }, delayTime);
            })
        }
    }
})(jQuery);